$(function() {
	var Swiper_active = $('.swiper-container2 .active-nav'),
		Swiper_slide = $('.swiper-container2 .swiper-slide')
	Swiper_active1 = $('.swiper-container-list .active-nav'),
		Swiper_slide1 = $('.swiper-container-list .swiper-slide');

	var mySwiper2 = new Swiper('.swiper-container2', {
		watchSlidesProgress: true,
		watchSlidesVisibility: true,
		slidesPerView: 3,
		onTap: function() {
			mySwiper3.slideTo(mySwiper2.clickedIndex)
		}
	})
	var mySwiper3 = new Swiper('.swiper-container3', {
		onSlideChangeStart: function() {
			updateNavPosition(Swiper_active, Swiper_slide, mySwiper3, mySwiper2)
		}
	})

	var _mySwiperlist = new Swiper('.swiper-container-list', {
		watchSlidesProgress: true,
		watchSlidesVisibility: true,
		slidesPerView: 6,
		onTap: function() {
			_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
		}
	})
	var _mySwiperopts = new Swiper('.swiper-container-opts', {
		onSlideChangeStart: function() {
			updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
		}
	})

	function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
		Swiper_active.removeClass('active-nav')
		var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active-nav');
		activeNav.siblings().removeClass("active-nav");
		if(!activeNav.hasClass('swiper-slide-visible')) {
			if(activeNav.index() > mySwiper_list.activeIndex) {
				var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
				mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
			} else {
				mySwiper_list.slideTo(activeNav.index())
			}
		}
	}

	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		effect: 'coverflow',
		grabCursor: true,
		centeredSlides: true,
		slidesPerView: 'auto',
		autoplay: 2000,
		loop: true,
		coverflow: {
			rotate: 50,
			stretch: 0,
			depth: 100,
			modifier: 1,
			slideShadows: true
		},
	});

	var oTop = $('#goTop'),
		tab = $('#dis-tab');
	$(window).scroll(function() {
		var iTop = $(window).scrollTop();
		if(iTop >= $('.banner').height()) {
			oTop.fadeIn();
			tab.fadeIn();
		} else {
			oTop.fadeOut();
			tab.fadeOut();
		}
	});
	oTop.click(function() {
		$('body,html').animate({
			"scrollTop": 0
		}, 1000)
	})
})
var clock;

$(document).ready(function() {
	var clock;

	clock = $('.clock').FlipClock({
		clockFace: 'DailyCounter',
		autoStart: false,
		callbacks: {
			stop: function() {
				$('.message').html('The clock has stopped!')
			}
		}
	});

	clock.setTime(54000);
	clock.setCountdown(true);
	clock.start();
});